<template>
  <div>
<el-card>

<el-form :inline="true" class="demo-form-inline" :disabled="isShow">
  <el-form-item label="一级分类">
    <el-select v-model="category1Id" placeholder="请选择">
      <el-option :label="c1.name" :value="c1.id" v-for="c1 in Selector.category1List" :key="c1.id"/>
    
    </el-select>
  </el-form-item>
  <el-form-item label="二级分类">
    <el-select v-model="category2Id" placeholder="请选择">
      <el-option :label="c2.name" :value="c2.id"  v-for="c2 in Selector.category2List" :key="c2.id" />
     
    </el-select>
  </el-form-item>
  <el-form-item label="三级分类">
    <el-select v-model="category3Id" placeholder="请选择">
      <el-option :label="c3.name" :value="c3.id" v-for="c3 in Selector.category3List" :key="c3.id"/>
      
    </el-select>
  </el-form-item>
</el-form>



</el-card>
  </div>
</template>

<script lang="ts">
  export default {
    name:'CategorySelector'
  }
</script>


<script lang="ts" setup>

import { reactive,onMounted, computed } from "vue"

import { useCategorySelectorStore } from '@/stores/CategoryList'
const Selector = useCategorySelectorStore()
defineProps(["isShow"])
//1定义可以获取一级分类的数据
onMounted(() => {
  Selector.getCategory1ListData()
});

  //2计算属性一级
const category1Id = computed({
  get() {
  return Selector.category1Id as number 
 },
  set(id:number) {
    Selector.getCategory2ListData(id);
 }
})
//3计算属性二级的
const category2Id = computed({
  get() {
    return Selector.category2Id as number 
  },
  set(id:number) {
    Selector.getCategory3ListData(id) 
  }
})
//计算三级分类的
const category3Id = computed({
  get() {
    return Selector.category3Id as number 
  },
  set(id: number) {
    //将数据显示到输入框中
    Selector.SaveCategory3Id(id)
  }
})



</script>


<style lang="scss" scoped>

</style>